<template>
	<view class="content ly_background-color" style="height: 100%;">
		<view class="content_ly" v-for="i in list" @click="handelClick(i.id)">
			<image src="https://blog.dbsgw.com/content/templates/Fys/images/random/4.jpg" mode="aspectFill"></image>
			<view class="content_ly_con">
				<view class="content_ly_con_title">
					{{i.title}}
				</view>
				<view class="content_ly_con_content">
					{{i.title}}
				</view>
				<info></info>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryAnsweQuestions
	} from './api/api.js'
	import info from '../../components/info.vue'
	export default {
		components: {
			info
		},
		data() {
			return {
				title: 'Hello',
				list: [],
				// 分页参数
				Pagination: {
					current: 1, //当前页
					size: 10, // 一个显示多少条
					total: null, // 总条数
					pages: null // 总页数
				}
			}
		},
		onLoad() {

		},

		methods: {

			/**
			 * @param {int} id  文章的id
			 */
			handelClick(id) {
				console.log("sss")
				uni.navigateTo({
					url: '/pages/article/article?id=' + id,
				});
			},
			/**
			 * @param {布尔型} bool 1. true 代表分页加载数据  2. false 代表重新加载 
			 */
			query(bool) {
				queryAnsweQuestions({
					page: this.Pagination.current,
					pageSize: this.Pagination.size
				}).then(res => {
					const {
						code,
						page,
						data
					} = res.data
					console.log(code, page, data, '-----------')

					// 错误返回提示
					if (code != 20000) return uni.showToast({
						title: '请求出错',
						duration: 2000
					});

					// 分页
					this.Pagination.current = page.page
					this.Pagination.size = page.pageSize
					this.Pagination.total = page.count
					this.Pagination.pages = Math.ceil(this.Pagination.total / this.Pagination.size)

					// 数据
					if (bool) {
						this.list = [...this.list, ...data]
					} else {
						this.list = data
					}
				}).catch(err => {

				})
			}
		},
		created() {
			this.query()
		},
		/**
		 * 页面触底 触发函数 分页
		 */
		onReachBottom() {
			if (this.Pagination.current >= this.Pagination.pages) {
				uni.showToast({
					title: "到底了"
				})
			} else {
				this.Pagination.current++
				this.query(true)
			}

		}
	}
</script>

<style scoped>
	.content {
		padding: 30rpx;
	}

	.content_ly {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.content_ly:last-child {
		margin-bottom: 0;
	}

	.content_ly_con {
		padding: 20rpx;
	}

	.content_ly_con_title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.content_ly_con_content {
		margin: 20rpx 0;
		font-size: 26rpx;
		color: #606266;
	}
</style>
